<script setup lang="ts">
import { useLogClassify } from '@/utils/dataHook'

const { value } = defineProps({
  value: {
    type: Array,
    default: () => [],
  },
})

const emits = defineEmits(['input'])
const logClassify = useLogClassify()
const currentValue = ref<any>([])

onMounted(() => {
  currentValue.value = value
})

function changeData(values: string[]) {
  emits('input', values)
}
</script>

<template>
  <el-tree-select
    v-model="currentValue" :data="logClassify" style="width: 240px;" node-key="value"

    clearable multiple collapse-tags
    class="w-full!"
    @change="changeData"
  >
    <template #default="{ data }">
      <div class="custom-tree-node">
        <div><SvgIcon v-if="data.isType" name="ep:document-copy" /><SvgIcon v-else name="ep:folder-opened" /><span class="ml-[10px]">{{ data.label }}</span></div>
      </div>
    </template>
  </el-tree-select>
</template>
